<!DOCTYPE html>
<html>
<head>
   <!-- 页面meta -->
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>传智健康</title>
   <meta name="description" content="传智健康">
   <meta name="keywords" content="传智健康">
   <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
   <!-- 引入样式 -->
   <link rel="stylesheet" href="../plugins/elementui/index.css">
   <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
   <link rel="stylesheet" href="../css/style.css">
   <link rel="stylesheet" href="../css/orderset.css">
   <!-- 引入组件库 -->
   <script src="../js/vue.js"></script>
   <script src="../plugins/elementui/index.js"></script>
   <script type="text/javascript" src="../js/jquery.min.js"></script>
   <script src="../js/axios-0.18.0.js"></script>
</head>
<body class="hold-transition">
<div id="app">
   <!--头信息-->
   <div class="content-header">
      <h1>预约管理
         <small>预约设置</small>
      </h1>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
         <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item>预约管理</el-breadcrumb-item>
         <el-breadcrumb-item>预约设置</el-breadcrumb-item>
      </el-breadcrumb>
   </div>
   <!--头信息/-->

   <div class="app-container">
      <div class="box">
         <div class="box ordersetting">
            <!--下载上传按钮-->
            <el-card class="box-card">
               <div class="boxMain">
                  <el-button style="margin-bottom: 20px;margin-right: 20px" type="primary" @click="downloadTemplate()">
                     模板下载
                  </el-button>
                  <el-upload action="/ordersetting/upload.do"
                             name="excelFile"
                             :show-file-list="false"
                             :on-success="handleSuccess"
                             :before-upload="beforeUpload">
                     <el-button type="primary">上传文件</el-button>
                  </el-upload>
               </div>
               <div>
                  操作说明：请点击"模板下载"按钮获取模板文件，在模板文件中录入预约设置数据后点击"上传文件"按钮上传模板文件。
               </div>
            </el-card>
            <!--下载上传按钮/-->

            <!--日历区-->
            <div class="calendar">
               <!-- 年份 月份 -->
               <div class="month">
                  <div class="currentdate">
                     <span class="choose-year">{{ currentYear }}年</span>
                     <span class="choose-month">{{ currentMonth }}月</span>
                  </div>
                  <div class="choose">
                     <span @click="goCurrentMonth(currentYear,currentMonth)" class="gotoday">今天</span>
                     <span @click="pickPre(currentYear,currentMonth)">❮</span>
                     <span @click="pickNext(currentYear,currentMonth)">❯</span>
                  </div>
                  <div class="clearfix"></div>
               </div>
               <!--年份 月份/-->

               <!-- 星期 -->
               <div class="caldate">
                  <ul class="weekdays">
                     <li>周一</li>
                     <li>周二</li>
                     <li>周三</li>
                     <li>周四</li>
                     <li>周五</li>
                     <li>周六</li>
                     <li>周日</li>
                  </ul>
                  <!-- 日期 -->
                  <ul class="days">
                     <!-- v-for循环 每一次循环用<li>标签创建一天 -->
                     <li v-for="dayobject in days">
                        <template>
                           <!-- 非当前月份 -->
                           <div class="other-month" v-if="dayobject.day.getMonth()+1 != currentMonth">
                              {{ dayobject.day.getDate() }}
                           </div>
                           <!-- 非当前月份/ -->

                           <!-- 当前月 -->
                           <div class="everyday" v-if="dayobject.day.getMonth()+1 == currentMonth">
                              <span class="datenumber">{{ dayobject.day.getDate()}}</span>

                              <template>
                                 <template v-for="obj in leftobj">
                                    <template v-if="obj.date == dayobject.day.getDate()">
                                       <template v-if="obj.number > obj.reservations">
                                          <div class="usual">
                                             <p>可预约{{obj.number}}人</p>
                                             <p>已预约{{obj.reservations}}人</p>
                                          </div>
                                       </template>
                                       <template v-else>
                                          <div class="fulled">
                                             <p>可预约{{obj.number}}人</p>
                                             <p>已预约{{obj.reservations}}人</p>
                                             <p>已满</p>
                                          </div>
                                       </template>
                                    </template>
                                 </template>
                                 <button v-if="dayobject.day > today" @click="handleOrderSet(dayobject.day)"
                                         class="orderbtn">设置
                                 </button>
                              </template>

                           </div>
                           <!-- 当前月/ -->
                        </template>
                     </li>
                  </ul>
               </div>
            </div>
            <!--日历区/-->
         </div>
      </div>
   </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script>
   new Vue({
      el: '#app',
      data: {
         today: new Date(),//当前日期
         currentDay: 1,
         currentMonth: 1,
         LocalMonth: 1,
         currentYear: 1970,
         currentWeek: 1,
         days: [],
         leftobj: []//用于装载页面显示的月份已经进行预约设置的数据
      },
      created: function () {//在vue初始化时调用
         this.initData(null);
      },
      methods: {
         //预约设置
         handleOrderSet(day) {
            //alert(day.getFullYear()+"-"+(day.getMonth()+1)+"-"+day.getDate());
            //1.弹出输入提示框
            this.$prompt('请输入可预约人数', '预约设置', {
               confirmButtonText: '确定',
               cancelButtonText: '取消',
               inputPattern: /^[0-9]*[1-9][0-9]*$/,
               inputErrorMessage: '只能输入正整数'
            }).then(({ value }) => { //点确认执行回调
               //2.封装参数
               var para = {
                  orderDate:this.formatDate(day.getFullYear(),day.getMonth()+1,day.getDate()),//日期
                  number:value //可预约人数
               };
               //3.发送ajax请求,进行指定日期的预约设置
               axios.post("/ordersetting/editNumberByDate.do",para).then((res) => {
                  if (res.data.flag) {
                     //编辑成功
                     //调用展示当前页日期方法
                     this.initData(para.orderDate);
                     this.$message({
                        type:'success',
                        message:res.data.message
                     })
                  } else {
                     //编辑失败
                     this.$message.error(res.data.message);
                  }
               }).catch().finally();

            }).catch(() => { //点取消执行回调
               this.$message({
                  type: 'info',
                  message: '取消输入'
               });
            });

         },
         //上传之前进行文件格式校验
         beforeUpload(file) {
            /*const isXLS = file.type === 'application/vnd.ms-excel';
            if (isXLS) {
               return true;
            }
            const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
            if (isXLSX) {
               return true;
            }*/
            var fileName = file.name;
            var index = fileName.lastIndexOf(".");
            var suffix = fileName.substr(index + 1);
            if (suffix === 'xls' || suffix === 'xlsx') {
               return true;
            }
            this.$message.error('上传文件只能是xls或者xlsx格式!');
            return false;
         },
         //下载模板文件
         downloadTemplate() {
            //根据浏览器特性,无法展示内容会进行下载
            window.location.href = "../../template/ordersetting_template.xlsx";
         },
         //上传成功提示
         handleSuccess(response, file) {
            if (response.flag) {
               //调用初始化日历展示
               this.initData();
               this.$message({
                  message: response.message,
                  type: 'success'
               });
            } else {
               this.$message.error(response.message);
            }

         },
         //初始化当前页要展示的日期
         initData: function (cur) {
            var date;
            var index = 0;   //控制显示预定的天数
            if (cur) {
               date = new Date(cur);
            } else {
               var now = new Date();
               var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1));
               d.setDate(35);
               date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
            }
            this.currentDay = date.getDate();
            this.currentYear = date.getFullYear();
            this.currentMonth = date.getMonth() + 1;
            this.currentWeek = date.getDay(); // //本月第一天是周几（周日0 周六 6）
            var today = new Date();
            this.LocalMonth = today.getMonth() + 1;
            if (this.currentWeek == 0) {
               this.currentWeek = 7;
            }
            var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay);
            this.days.length = 0;
            // 今天是周日，放在第一行第7个位置，前面6个
            //初始化本周
            for (var i = this.currentWeek - 1; i >= 0; i--) {
               var d = new Date(str);
               d.setDate(d.getDate() - i);
               var dayobject = {};
               dayobject.day = d;
               var now = new Date();
               if (d.getDate() === (now.getDate()) && d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear()) {
                  dayobject.index = index++;//从今天开始显示供预定的数量
               }
               else if (index != 0 && index < 3)
                  dayobject.index = index++;//从今天开始3天内显示供预定的数量
               this.days.push(dayobject);//将日期放入data 中的days数组 供页面渲染使用
            }
            //其他周

            for (var i = 1; i <= 42 - this.currentWeek; i++) {
               var d = new Date(str);
               d.setDate(d.getDate() + i);
               var dayobject = {};//dayobject   {day:date,index:2}
               dayobject.day = d;
               var now = new Date();
               if (d.getDate() === (now.getDate()) && d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear()) {
                  dayobject.index = index++;
               }
               else if (index != 0 && index < 3)
                  dayobject.index = index++;
               this.days.push(dayobject);
            }

            /*this.leftobj = [
                { date: 1, number: 120, reservations: 1 },
                { date: 3, number: 120, reservations: 1 },
                { date: 4, number: 120, reservations: 120 },
                { date: 6, number: 120, reservations: 1 },
                { date: 8, number: 120, reservations: 1 }
            ];*/
            //发送ajax请求，获取预约信息
            axios.get("/ordersetting/getOrdersettingByMonth/" + this.currentYear + "-" + this.currentMonth + ".do").then((res) => {
               if (res.data.flag) {
                  //查询成功
                  //设置日历每日预约信息模型数据
                  this.leftobj = res.data.data;
               }else {
                  //查询失败
                  this.$message.error(res.data.message);
               }

            });
         },
         //切换到当前月份
         goCurrentMonth: function (year, month) {
            var d = new Date();
            this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
         },
         //向前一个月
         pickPre: function (year, month) {
            // setDate(0); 上月最后一天
            // setDate(-1); 上月倒数第二天
            // setDate(dx) 参数dx为 上月最后一天的前后dx天
            var d = new Date(this.formatDate(year, month, 1));
            d.setDate(0);
            this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
         },
         //向后一个月
         pickNext: function (year, month) {
            var d = new Date(this.formatDate(year, month, 1));
            d.setDate(35);////获取指定天之后的日期
            this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
         },
         // 返回 类似 2016-01-02 格式的字符串
         formatDate: function (year, month, day) {
            var y = year;
            var m = month;
            if (m < 10) m = "0" + m;
            var d = day;
            if (d < 10) d = "0" + d;
            return y + "-" + m + "-" + d
         }
      }
   })
</script>
</html>